<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.css">
		<style>
			body{
				background: #F8F8F8;
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a,.mui-title{
				color:rgba(255,255,255,1);
			}
			.container_apply{
				width: 100%;
			
				position: relative;
				float: left;
				background:rgba(255,255,255,1);
		
				box-sizing: border-box;
			}
			.apply_in{
				width: calc(96% - 15px);
                position: relative;
				float: left;
				margin-left: 15px;
				border-bottom: 1px solid #ECECEC;
			display: inline-block;
				padding: 15px  0;
				box-sizing: border-box;
			}
			.apply_in>div:nth-child(1){
				position: relative;
		        float: left;
				width: 70%;
				height:100% ;
			}
				.apply_in>div:nth-child(1)>div:nth-child(1){
					position: relative;
					float: left;
					width: 100%;
					height: 30px;
					line-height: 30px;
					font-size:15px;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
				.apply_in>div:nth-child(1)>div:nth-child(2){
				position: relative;
				float: left;
				width: 100%;
				height: 30px;
				line-height: 30px;
				font-size:12px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(153,153,153,1);
			}
			.apply_in>div:nth-child(2){
				position: relative;
			    float: left;
				width: 30%;
				height:100%;
			}
			.apply_in>div:nth-child(2)>div:nth-child(1){
				font-size:15px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(31,175,72,1);
				position: relative;
				float: left;
				width: 100%;
				height: 30px;
				line-height: 30px;
			}
			.apply_in>div:nth-child(2)>div:nth-child(2){
			    font-size:12px;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(153,153,153,1);
				position: relative;
				float: left;
				width: 100%;
				height: 30px;
				line-height: 30px;
			}
			.addclass{
             color: red!important;
			}
			
			.hedactive{
						color:rgba(254,105,101,1)!important;
						border-bottom: 2px solid  rgba(254,105,101,1); 
					}
			.heads{
					  position: relative;
					  width: 100%;
					  height: 50px;
					  display: flex;
					  justify-content: space-around;
					  border-bottom: 1px solid rgba(153,153,153,0.6)!important;
					  padding-top: 8px;
					  box-sizing: border-box;
			}
					.dan{
						padding: 0px  0px;
						line-height: 36px;
						box-sizing: border-box;
						font-size:16px;
			      font-weight:bold;
			      height:36px;
			      color:rgba(51,51,51,1);
					}
		</style>
	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">充值记录</h1>
		</header>
		<div class="mui-content">
		  <div class="heads">
		  	<div index="0" class="dan  hedactive">充值记录</div>
		  	<div index="1" class="dan">提现记录</div>
		  </div>
		  
			
			<div class="left  container_apply">
			
				<!-- <div class="apply_in">
					<div>
						<div>充值商品-50金币</div>
						<div>订单号：523645287682</div>
					</div>
					<div>
						<div class="addclass">未支付</div>
						<div>2019年9月3日</div>
					</div>
				</div> -->
				
				<!-- <div class="apply_in">
					<div>
						<div>充值商品-50金币</div>
						<div>订单号：523645287682</div>
					</div>
					<div>
						<div class="addclass">未支付</div>
						<div>2019年9月3日</div>
					</div>
				</div> -->
			</div>
			
			<div class="right  container_apply" style="display: none;">
				<!-- <div class="apply_in">
					<div>
						<div>充值商品-50金币</div>
						<div>订单号：523645287682</div>
					</div>
					<div>
						<div>支付成功</div>
						<div>2019年9月3日</div>
					</div>
				</div> -->
				<!-- <div class="apply_in">
					<div>
						<div>充值商品-50金币</div>
						<div>订单号：523645287682</div>
					</div>
					<div>
						<div>支付成功</div>
						<div>2019年9月3日</div>
					</div>
				</div> -->
				
				
			</div>

		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var type = 0;
				mui(".heads").on("tap", ".dan", function() {
						$(this).addClass("hedactive");
						$(this).siblings().removeClass("hedactive")
						var  value=$(this).attr("index");
						if(value==0){
							type = 1;
							$(".left").css("display","block");
					$(".right").css("display","none")
						}else{
							type = 2;
							$(".left").css("display","none");
							$(".right").css("display","block")
						}
					});
						
				
				
			
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				var congzhipage = 1;
				var tixianpage = 1;
				function getData(func){
					var page = 1;
					if(type==1){
						page = congzhipage; 
					}else if(type==2){
						page = tixianpage;
					}
					if(page==0){
						mui.toast('没有更多了');
						if(func){
							func();
						}
						return;
					}
					// mui.alert(type);
					// return
					mui.post(url+'/juyou/congzhi/getcongzhilist',{token:user.token,page:page,type:type},function(res){
						if(res.code==200){
							var data = res.data;
							if(type==0){
								type = 1;
								if(data.congzhi.data.length<10){
									congzhipage = 0;
								}else{
									congzhipage = 2;
								}
								var str = '';
								mui.each(data.congzhi.data,function(i,v){
									if(v.status==1){
										str += '<div class="apply_in">'+
													'<div>'+
														'<div>充值商品-'+v.shangping+'</div>'+
														'<div>订单号：'+v.name+'</div>'+
													'</div>'+
													'<div>'+
														'<div>支付成功</div>'+
														'<div>'+v.create_time+'</div>'+
													'</div>'+
												'</div>';
									}else{
										str+='<div class="apply_in">'+
													'<div>'+
													'	<div>充值商品-'+v.shangping+'</div>'+
														'<div>订单号：'+v.name+'</div>'+
													'</div>'+
													'<div>'+
														'<div class="addclass">未支付</div>'+
													'	<div>'+v.create_time+'</div>'+
													'</div>'+
												'</div>';
									}
								})
								$(".left").append(str);
								str = '';
								if(data.tixian.data.length<10){
									tixianpage = 0;
								}else{
									tixianpage = 2;
								}
								mui.each(data.tixian.data,function(i,v){
									if(v.status==1){
										str+='<div class="apply_in">'+
												'<div>'+
													'<div>提现金额:'+v.rmb+'</div>'+
													'<div>订单号：'+v.name+'</div>'+
												'</div>'+
												'<div>'+
													'<div>支付成功</div>'+
													'<div>'+v.create_time+'</div>'+
												'</div>'+
											'</div>';
									}else{
										str+='<div class="apply_in">'+
												'<div>'+
													'<div>提现金额:'+v.rmb+'</div>'+
													'<div>订单号：'+v.name+'</div>'+
												'</div>'+
												'<div>'+
													'<div class="addclass">未支付</div>'+
													'<div>'+v.create_time+'</div>'+
												'</div>'+
											'</div>';
									}
								})
								$(".right").append(str);
							}else if(type==1){
								if(data.data.length<10){
									congzhipage = 0;
								}else{
									congzhipage = page+1;
								}
								var str = '';
								mui.each(data.data,function(i,v){
									if(v.status==1){
										str += '<div class="apply_in">'+
													'<div>'+
														'<div>充值商品-'+v.shangping+'</div>'+
														'<div>订单号：'+v.name+'</div>'+
													'</div>'+
													'<div>'+
														'<div>支付成功</div>'+
														'<div>'+v.create_time+'</div>'+
													'</div>'+
												'</div>';
									}else{
										str+='<div class="apply_in">'+
													'<div>'+
													'	<div>充值商品-'+v.shangping+'</div>'+
														'<div>订单号：'+v.name+'</div>'+
													'</div>'+
													'<div>'+
														'<div class="addclass">未支付</div>'+
													'	<div>'+v.create_time+'</div>'+
													'</div>'+
												'</div>';
									}
								})
								$(".left").append(str);
							}else if(type==2){
								var str = '';
								if(data.data.length<10){
									tixianpage = 0;
								}else{
									tixianpage = page+1;
								}
								mui.each(data.data,function(i,v){
									if(v.status==1){
										str+='<div class="apply_in">'+
												'<div>'+
													'<div>提现金额:'+v.rmb+'</div>'+
													'<div>订单号：'+v.name+'</div>'+
												'</div>'+
												'<div>'+
													'<div>支付成功</div>'+
													'<div>'+v.create_time+'</div>'+
												'</div>'+
											'</div>';
									}else{
										str+='<div class="apply_in">'+
												'<div>'+
													'<div>提现金额:'+v.rmb+'</div>'+
													'<div>订单号：'+v.name+'</div>'+
												'</div>'+
												'<div>'+
													'<div class="addclass">未支付</div>'+
													'<div>'+v.create_time+'</div>'+
												'</div>'+
											'</div>';
									}
								})
								$(".right").append(str);
							}
						}else{
							mui.toast(res.msg);
						}
						if(func){
							func();
						}
					})
				}
				mui.init({
					pullRefresh : {
						container:'.mui-content',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
						up : {
							height:50,//可选.默认50.触发上拉加载拖动距离
							auto:true,//可选,默认false.自动上拉加载一次
							contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
							contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
							callback :function(){
							// setTimeout(function(){
							// 	mui('.mui-content').pullRefresh().endPullupToRefresh();
							// },1000)
							getData(function(){
								mui('.mui-content').pullRefresh().endPullupToRefresh();
							})
							} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							},
					}
				});

			})
		</script>
	</body>

</html>
